{% load staticfiles %}
{% load blog_tags %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="baidu-site-verification" content="BB0a0qDxyr"/>
    <meta name="robots" content="follow, all"/>
    <meta name="description" content="探索 Python 世界，分享 django web开发、Python 数据分析、Python 网络爬虫等一切与 Python 相关的知识"/>
    {% block title %}
        <title>{{ headline|default:"追梦人物的博客 - 探索 Python、分享 Python" }}</title>
    {% endblock title %}
    <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'blog/css/mobi.min.css' %}">
    <link rel="stylesheet" href="{% static 'blog/css/theme.css' %}">
</head>
<body>
<section class="flex-center">
    {% block aside %}
        <aside id="sidebar" class="sidebar hide-on-mobile">
            <div class="logo text-center top-gap"><a href="{% url 'blog:index' %}">ZM</a></div>
            <nav class="navigation">
                <ul>
                    <li class="home"><a href="{% url 'blog:index' %}"><i class="item-icon fa fa-home"
                                                                         aria-hidden="true"></i> 首页</a></li>

                    <li class="column">
                        {% get_categories as category_list %}
                        <a href=""><i class="item-icon fa fa-heart" aria-hidden="true"></i> 推荐专题</a>
                        <ul>
                            {% for category in category_list %}
                                <li>
                                    <a href="{% url 'blog:in_category' category.slug %}" class="recommended">
                                        <span class="category">{{ category }}</span>
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </li>

                    <li class="column">
                        {% get_categories as category_list %}
                        <a href=""><i class="item-icon fa fa-columns" aria-hidden="true"></i> 分类</a>
                        {% comment %}
                    <ul>
                        {% for category in category_list %}
                            <li>
                                <a href="{% url 'blog:in_category' category.slug %}">
                                    <span class="category">{{ category }}</span>
                                    <span class="number">({{ category.post_count }})</span>
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                    {% endcomment %}
                    </li>
                    <li class="archive">
                        <a href=""><i class="item-icon fa fa-archive top-gap" aria-hidden="true"></i> 归档</a>
                        <ul>
                            <li>
                                <a href="">2016年</a>
                                <ul>
                                    <li><a href="">12月</a></li>
                                    <li><a href="">11月</a></li>
                                    <li><a href="">10月</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="">2015年</a>
                                <ul>
                                    <li><a href="">12月</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="rss"><a href=""><i class="item-icon fa fa-rss" aria-hidden="true"></i> RSS</a></li>
                    <li class="social">
                        <div class="flex-left">
                            <div class="unit"><a href=""><i class="item-icon fa fa-github" aria-hidden="true"></i>
                                GitHub</a></div>

                            <div class="unit"><a href=""><i class="item-icon fa fa-globe" aria-hidden="true"></i> 知乎</a>
                            </div>
                        </div>
                        {% comment %}
                    <div class="unit"><a href=""><i class="item-icon fa fa-weibo" aria-hidden="true"></i> 微博</a>
                    </div>
                    {% endcomment %}
                    </li>
                </ul>
            </nav>
        </aside>
    {% endblock aside %}
    <header class="flex-middle" id="id_header">
        <div class="unit show-btn-wrapper">
            <i class="fa fa-bars show-on-mobile" aria-hidden="true" id="id_show_btn"></i>
            <a href="{% url 'blog:index' %}"><i class="fa fa-home show-on-mobile" aria-hidden="true" id=""
                                                style="margin-left: 1em"></i></a>
        </div>
        <div class="unit search-form">
            <form action="{% url 'blog:search' %}" class="search-form text-right" method="get">
                {% csrf_token %}
                <input type="text" name="q" placeholder="输入关键词搜索...">
                <button type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
            </form>
        </div>
    </header>
    {% block main %}

    {% endblock %}
</section>

<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
    var leftWidht = $('#id_container').offset().left;
    var sidebarWidth = $('#sidebar').width();
    $('#sidebar').css({
        'position': 'fixed',
        'left': leftWidht - sidebarWidth * 1.5,
        'top': 0,
        'bottom': 0
    });

    var flag = 1;
    $('#id_show_btn').on('click', function () {
        if (flag) {
            showSidebar();
            flag = 0
        } else {
            hideSidebar();
            flag = 1
        }
    });

    function showSidebar() {
        $('#sidebar').css({
            'position': 'fixed',
            'left': '-265px',
            'top': '0',
            'bottom': '0'
        }).show().animate({left: '0'}, 300);

        $('#id_container').css({
            'position': 'fixed',
            'left': '0',
            'top': '0'
        }).animate({left: '265'}, 300);

        $('#id_header').css({
            'left': '0',
            'top': '0'
        }).animate({left: '265'}, 300);
    }

    function hideSidebar() {
        $('#sidebar').animate({left: '-265px'}, 300);

        $('#id_container').animate({left: '0'}, 300, function () {
            $('#id_container').css({
                'position': 'static'
            });
        });

        $('#id_header').animate({left: '0'}, 300, function () {
            $('#id_container')
        });
    }
</script>
</body>
</html>
